<template>
  <div class="bar-type">
    <span class="text">{{ currentTime | formatTime }}</span>
    <div class="bar" ref="bar" :style="{ backgroundImage: backgroundStyle }">
      <span class="icon" ref="icon"></span>
    </div>
    <span class="text">{{ duration | formatTime }}</span>
  </div>
</template>

<script>
export default {
  name: "Bartype",
  data() {
    return {};
  },
  props: {
    value: Number,
    currentTime: Number,
    duration: Number,
  },
  //过滤器来过滤收到的音乐时间
  filters: {
    formatTime(value) {
      //计算分钟数
      let mins = Math.floor(value / 60); //计算出来向下取整
      //计算秒数
      let secend = Math.floor(value % 60);
      secend = secend > 9 ? secend : "0" + secend; //如果大于9前面为本身 不大于则加0
      return mins + ":" + secend;
    },
  },
  computed: {
    //根据value的变化修改背景线性渐变效果
    backgroundStyle() {
      const percent = this.value * 100;
      return `linear-gradient(to right, #60B55A 0%, #60B55A ${percent}%, #212529 ${percent}% , #212529 100%)`;
    },
  },
  watch: {
    value: {
      handler() {
        //组件dom下次渲染好
        this.$nextTick(() => {
          //调整初始位置
          this.$refs.icon.style.transform = `translate(${
            this.maxScroll * this.value
          }px,-50%)`;
        });
      },
      immediate: true, //初始化后就执行，设置好value后就会执行一次
    },
  },
  mounted() {
    //操作dom 添加事件
    let bar = this.$refs.bar;
    let icon = this.$refs.icon;
    //bar的宽度减去icon的宽度

    // console.log("当前页面宽度", bar.offsetWidth);
    // console.log("当前图标宽度", icon.offsetWidth);
    const maxScroll = (this.maxScroll = bar.offsetWidth - icon.offsetWidth);

    //添加触摸事件
    icon.addEventListener("mousedown", (event) => {
      //记录每次偏移量的位置
      let x = this.maxScroll * this.value;

      //告诉外部触摸开始
      this.$emit("mousedown");

      //记录鼠标起始的位置
      const startX = event.clientX;

      const mouseMoveCallBack = (event) => {
        //记录偏移量
        let offsetX = event.clientX - startX; //停止位置减去鼠标点击开始位置
        offsetX = offsetX + x; //叠加上一次位置
        //约定偏移量大小
        if (offsetX < 0) {
          offsetX = 0;
        }
        if (offsetX > maxScroll) {
          offsetX = maxScroll;
        }
        //手指移动多少就让icon偏移多少 在当前的位置跟着偏移
        icon.style.transform = `translate(${offsetX}px,-50%)`;

        const progress = offsetX / maxScroll; //计算偏移量的百分比
        this.$emit("input", progress);
      };
      const mouseEndCallBack = (event) => {
        console.log("mouseEndCallBack", event);
        //告诉外部触摸开始
        this.$emit("mouseup");
        //移除监听
        document.removeEventListener("mousemove", mouseMoveCallBack);
        document.removeEventListener("mouseup", mouseEndCallBack);
      };
      //添加监听
      document.addEventListener("mousemove", mouseMoveCallBack);
      document.addEventListener("mouseup", mouseEndCallBack);
    });
  },
};
</script>

<style scoped lang="scss">
.bar-type {
  width: 95%;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bar {
  flex: 1;
  height: 2px;
  background: #212529;
  position: relative;
  .icon {
    position: absolute;
    top: 50%;
    left: 0;
    //icon 向上50百分之 在向下位移50 回到父元素bar的正中间
    transform: translate(0, -50%); // x值0 y值50
    display: block;
    width: 6px;
    height: 6px;
    border: 2px solid #fff;
    background: #60b55a;
    border-radius: 50%;

    &::before {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
    }
  }
}
.text {
  color: #666;
  font-size: 14px;
  margin: 0 10px;
}
</style>